<template>
	<view>
		<ul class="p30">
			<li @tap="setDiscount(v)" v-for="(v,i) in list" class="p30" :key="i">
				<view class="top">
					店铺满减活动
					<view v-if="v.inProgress == false && v.isOver == true" class="fr">
						未开始
					</view>
					<view v-if="v.inProgress == true && v.isOver == false" class="fr " style="color: #1BBF80;">
						进行中
					</view>
					<view v-if="v.inProgress == false && v.isOver == true" class="fr">
						已结束
					</view>
				</view>
				<view class="main">
					<span v-for="(j,k) in v.activityItems" :key="k">
						满 {{j.exceedPrice}} 减 {{j.deductionPrice}}
					</span>
					<p class="time">
						{{v.startDate}} - {{v.endDate}}
					</p>
				</view>
				<view class="btn">
					<view>
						<image class="vm" src="../../static/image/icon_bianji@2x.png" mode=""></image>
						编辑
					</view>
					<view @tap.stop @tap="open(v,i)">
						<image class="vm"  src="../../static/image/icon_delete@2x.png" mode=""></image>
						删除
					</view>
				</view>
			</li>
		</ul>
		<u-button @tap="go('../CreateDiscount/CreateDiscount')" class="addBtn" type="success">添加满减</u-button>
		<u-modal v-model="show" content="确认删除？" @confirm="delect" show-cancel-button></u-modal>
		<view v-if="list == '' " class=" dataNone">
			<image src="../../static/image/dinghdan@2x.png" mode=""></image>
			<p> 您还没有添加满减优惠~ </p> 
		</view>
	</view>
</template>

<script>
	import {
		activityList,
		activityDelete
	} from '@/api/api.js'
	export default {
		data() {
			return { 
				show: false,
				list: [],
				act: {},
				pageable: {
					pageNumber: 1,
					pageSize: 10
				},
				stops: false
			};
		},
		onShow() {
			this.inits()
		},
		onReachBottom() {
			if (!this.stops) {
				this.init()
			}
		},
		methods: {
			open(v, i) {
				this.show = true;
				this.act.item = v
				this.act.i = i 
			},
			async delect() {
				let data = await activityDelete({
					id: this.act.item.id
				})
				if (data.code == 0) {
					this.list.splice(this.act.i, 1)
				}
				if (this.list.length < 3) {
					this.inits()
				}
			},
			inits() {
				this.pageable.pageNumber = 1
				this.stops = false
				this.init()
			},
			async init() {
				let data = await activityList({
					pageable:this.pageable
				})
				this.list = data.data.content
				if (this.list.length != this.pageable.pageSize) {
					this.stops = true
				} else {
					this.pageable.pageNumber++
				}
			},
			setDiscount(item) {
				uni.setStorageSync('setDiscount', item)
				this.$navigateTo('../CreateDiscount/CreateDiscount?isAdd=false')
			},
			go(url) {
				this.$navigateTo(url)
			}
		}
	}
</script>

<style lang="less" scoped>
	li {
		margin-top: 26rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.03);
		border-radius: 20rpx;
		padding-bottom: 40rpx;

		.top {
			line-height: 104rpx;
			font-size: 32rpx;
			color: #1A1A1A;

			.fr {
				font-size: 28rpx;
				color: #999999;
			}
		}

		.time {
			font-size: 24rpx;
			color: #999999;
		}
	}

	.main {
		background: #F8F8F8;
		padding: 30rpx 20rpx;

		span {
			height: 40rpx;
			line-height: 40rpx;
			display: inline-block;
			padding: 0 20rpx;
			border: 1px solid #FB8324;
			border-radius: 4rpx;
			color: #FB8324;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
		}
	}

	.btn {
		margin-top: 30rpx;
		height: 32rpx;
		display: flex;

		view {
			width: 50%;
			text-align: center;
		}

		view:nth-of-type(2) {
			border-left: 1px solid #DDDDDD;
		}

		image {
			width: 34rpx;
			height: 34rpx;
			margin-right: 10rpx;
			margin-top: -6rpx;
		}
	}

	.addBtn {
		width: 690rpx;
		height: 84rpx;
		border-radius: 50rpx;
		position: fixed;
		left: 30rpx;
		bottom: 40rpx;
	}
</style>
